<template>
  <PageWrapper dense contentFullHeight class="flex">
    <HComplexPage
      class="px-4"
      isUpdate
      :preview="false"
      v-model:active="activePage"
      :pageType="pageInfo.pageType"
      :dataSource="pageInfo.modelList"
      :buttons="pageInfo.buttons"
    />
  </PageWrapper>
</template>

<script lang="ts">
  import { PropType, defineComponent, ref, unref, onMounted, inject } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import HComplexPage from '/@/components/HComplexPage/index.vue';
  import { ModalParams } from '/@/components/ModelTable';

  import { useRouter } from 'vue-router';
  import { getCompositeInfoApi } from '/@/api/config-center/model-design';

  export default defineComponent({
    name: 'ComModelComplexPage',
    components: { PageWrapper, HComplexPage },
    props: {
      modalParams: {
        type: Object as PropType<ModalParams>,
        default: () => ({}),
      },
    },
    setup(props) {
      const { currentRoute } = useRouter();
      const route = unref(currentRoute);
      const moduleId = route.meta.moduleId as string;
      const setComponentName = inject('setComponentName') as Fn;

      setComponentName('ComModelComplex' + moduleId);

      onMounted(() => {
        init();
      });
      const activePage = ref(0);
      const pageInfo = ref<Indexable>({});
      const modelId = ref(props.modalParams.modelId || (route.meta.modelId as string));
      async function init() {
        const data = await getCompositeInfoApi({ modelId: unref(modelId), moduleId });

        const ret = data.compositeDesignInfo || {};
        pageInfo.value = ret;
      }
      return {
        pageInfo,
        activePage,
      };
    },
  });
</script>
<style lang="less" scoped></style>
